<template>
  <div class="tabBar" v-if="$route.meta.isShow">
    <router-link to="/home/discovery" active-class='active'>首页</router-link>
    <router-link to="/shopping" active-class='active'>购物</router-link>
    <div class="publish">+</div>
    <router-link to="/message" active-class='active'>消息</router-link>
    <router-link to="/mine" active-class='active'>我</router-link>
  </div>
  
  <router-view/>
</template>
<script setup>

</script>
<style scoped>
.tabBar{
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%; 
  height: 40px;
  justify-content: space-around;  
  align-items: center;
  background-color: #fff;
}
.tabBar a{
  font-family: YouYuan;
  text-align: center;
  width: 22.5%;
  color: black;
}
.active{
  font-size: 29;
  font-weight: bolder;
}
.publish{
  width: 10%;
  height: 30px;
  color: #fff;
  text-align: center;
  align-items: center;
  font-size: 30px;
  background-color: red;
  border-radius: 12px;
}
</style>
